<template>
 <div class="page-box">
  <div class="page-search">
    <div>
      <label>单据查询</label>
      <el-input v-model="searchForm.Number" style="width: 160px;"></el-input>
    </div>
    <div>
      <label>供应商</label>
      <el-select v-model="searchForm.VendorId" style="width: 160px;" placeholder="请选择供应商" @change="VendorChange" allow-create filterable>
        <el-option v-for="Vendor in VendorList" :key="Vendor.Id" :label="Vendor.VendorName" :value="Vendor.Id"></el-option>
      </el-select>
    </div>

    <!---->

    <div>
      <label>出库仓</label>
      <el-select v-model="searchForm.WarehouseId" style="width: 160px;" placeholder="请选择出货仓" @change="WarehouseChange" allow-create filterable>
        <el-option v-for="Warehouse in WarehouseList" :key="Warehouse.Id" :label="Warehouse.WarehouseName" :value="Warehouse.Id"></el-option>
      </el-select>
    </div>
    <div>
      <label>状态</label>
      <el-select v-model="searchForm.Status" placeholder="请选择入库状态" style="width: 160px;">
          <el-option label="待审核" value="0"></el-option>
          <el-option label="已审核" value="1"></el-option>
      </el-select>
    </div>
    <div>
      <el-button type="primary" @click="search">查询</el-button>
      <el-button @click="reset">重置</el-button>
    </div>
  </div>

  <!---->

  <div class="page-section">
    <div class="page-tool">
      <el-button type="primary"  plain icon="el-icon-plus" @click="add" size="small">新增</el-button>
      <el-button type="danger"  plain icon="el-icon-delete" @click="dels" size="small">删除</el-button>

      <el-dropdown class="mg-l">
          <el-button size="small" type="primary" plain>
            <i class="el-icon-s-grid"></i> 
            <i class="el-icon-arrow-down el-icon--right"></i>
          </el-button>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item @click.native="exports"><i class="el-icon-receiving"></i>导出</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
    </div>

    <el-table :data="tableData" ref="dataForm" v-loading="isLoading" height="calc(100vh - 350px)">
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column fixed prop="Number" label="单号" :show-overflow-tooltip="true"></el-table-column>
      <el-table-column fixed prop="VendorName" label="供应商" :show-overflow-tooltip="true"></el-table-column>
      <el-table-column fixed prop="VendorContact" label="联系人" :show-overflow-tooltip="true"></el-table-column>
      <el-table-column fixed prop="VendorContactTel" label="联系人电话" :show-overflow-tooltip="true"></el-table-column>
      <el-table-column fixed prop="PaymentCategory" label="收款方式" :show-overflow-tooltip="true"></el-table-column>
      <el-table-column fixed prop="PaymentAccount" label="收款账户" :show-overflow-tooltip="true"></el-table-column>
      <el-table-column fixed prop="PaymentTime" label="收款日期" :show-overflow-tooltip="true"></el-table-column>
      
      <el-table-column prop="Status" label="订单状态" :show-overflow-tooltip="true">
        <template slot-scope="scope">
          <el-tag type="info" v-if="Number(scope.row.Status) === 0">待审核</el-tag>
          <el-tag type="success" v-else-if="Number(scope.row.Status) === 1">已审核</el-tag>
        </template>
      </el-table-column>

      <el-table-column fixed prop="WarehouseName" label="出库仓" :show-overflow-tooltip="true"></el-table-column>
      <el-table-column fixed prop="ReturnDate" label="退货日期" :show-overflow-tooltip="true"></el-table-column>
      <el-table-column fixed prop="DeliveryDate" label="出库日期" :show-overflow-tooltip="true"></el-table-column>
      <el-table-column fixed prop="Remark" label="备注" :show-overflow-tooltip="true"></el-table-column>

      <el-table-column label="操作" :show-overflow-tooltip="true" width="220">
        <template slot-scope="scope">
          <el-button type="text" @click="del(scope.row)">删除</el-button>
          <el-button type="text" @click="update(scope.row)">编辑</el-button>
          <el-button type="text" @click="detailsQuote(scope.row)">明细</el-button>
        </template>
      </el-table-column>
    </el-table>
    <Pagination @handleSizeChange="handleSizeChange" @handleCurrentChange="handleCurrentChange" :PageIndex="pageDomain.PageIndex" :PageSize="pageDomain.PageSize" :TotalCount="pageDomain.TotalCount" />
  </div>
  <!--弹窗-->
  <el-dialog :close-on-click-model="false" :title="dialogDomain.title" :visible.sync="dialogDomain.dialogVisible" width="65%" @close="closeDialog">
    <OrderPoReturnInput :VendorList="VendorList" :WarehouseList="WarehouseList" :model="model" :isUpdate="isUpdate" @callback="callback" v-if="dialogDomain.dialogVisible && dialogDomain.dialogType==0 "/>
    <OrderPoReturnInputDetails  v-else-if="dialogDomain.dialogVisible && dialogDomain.dialogType==1 "  :model="model"/>
  </el-dialog>  
</div>
</template>

<script>
import OrderPoReturnInput from './components/OrderPoReturnInput.vue'
import OrderPoReturnInputDetails from './components/OrderPoReturnInputDetails.vue'
import Pagination from '@/components/Pagination.vue'

export default {
  components:{
    OrderPoReturnInput,
    OrderPoReturnInputDetails,
    Pagination
  },
  mounted(){
    this.dataBind();
  },
  data(){
    return{
      VendorList:[],
      WarehouseList:[],
      //搜索字段
      searchForm:{
        Number:'',//采购退货单编号
        VendorId:'',//供应商
        WarehouseId:'',//出货仓
        Status:'',//入库编号 XR-2024-05-10-001
      },

      dialogDomain:{
        title:'添加采购退货订单',
        dialogVisible:false,
      },
      isUpdate:false,

      model:{
        Number:'',//单号

        VendorId:'',//供应商Id
        VendorName:'',//供应商

        VendorContact:'',//联系人
        VendorContactTel:'',//联系人电话
        PaymentCategory:'',//付款方式
        PaymentAccount:'',//收款账户
        PaymentTime:'',//收款日期

        Status:'0',

        WarehouseId:'',//出库仓id
        WarehouseName:'',//出库仓

        ReturnDate:'',//退货日期
        DeliveryDate:'',//出库日期
        Remark:'',//备注
      },

      pageDomain:{
        PageIndex:1,
        PageSize:10,
        TotalCount:0
      },
      tableData:[],
      isLoading:false,
    }
  },
  created(){
    this.GetOrderPoReturnSelectData();
  },
  methods:{
    VendorChange(model){
      this.model.VendorId = model.Id;
      this.model.VendorName = model.VendorName;
      console.log(model);
    },
    WarehouseChange(model){
      this.model.WarehouseId = model.Id;
      this.model.WarehouseName = model.WarehouseName;
      console.log(model);
    },
    
    //搜索查询
    search(){
      this.pageDomain.PageIndex=1;
      this.dataBind();
    },
    reset(){
      this.searchForm.Number = '';
      this.searchForm.VendorId = '';
      this.searchForm.WarehouseId = '';
      this.searchForm.Status = '';
    },
    //新增
    add(){
      this.dialogDomain.title="添加采购退货单"
      this.dialogDomain.dialogVisible=true;
      this.dialogDomain.dialogType=0;
      this.isUpdate=false;
    },
    dels(){
      if(this.$refs.dataForm.selection.length<=0){
                this.showNotify('请先选择一项')
                return;
            }
            this.$confirm('确定删除选中的数据吗？这将不可恢复, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            })
            .then(()=>{
                //获取选中的表格数据 并筛选id
                var ids =this.$refs.dataForm.selection.map(x=>x.Id)

                //拼接参数
                let params =  new URLSearchParams();
                params.append('ids',ids.join(','))


                this.$http.delete('/api/OrderPoReturn/DelAll',{
                    data:params,
                    headers:{
                        'content-Type': 'application/x-www-form-urlencoded'
                    },
                    loading:this.$loading()
                })
                .then((res)=>{
                    this.showNotify('操作成功','success');
                    this.dataBind();
                })
            }).catch(()=>{});
    },
    //删除
    del(model){
      this.$confirm('确定删除选中的数据吗？这将不可恢复, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
      .then(() => {
          this.$http.delete('/api/OrderPoReturn', {
            data: {
              Id: model.Id
            },
            headers: {
              'content-Type': 'application/x-www-form-urlencoded'
            }
          })
            .then((res) => {
              this.showNotify('操作成功', 'success');
              this.dataBind();
            })
        }).catch(() => { });
    },
    //编辑
    update(model){
      this.dialogDomain.title = "编辑采购退货";
      this.dialogDomain.dialogVisible = true;
      this.isUpdate = true;
      this.dialogDomain.dialogType = 0;
      model.Status = model.Status.toString();
      this.model = model;
    },
    detailsQuote(model){
      this.dialogDomain.title = "采购单明细";
      this.dialogDomain.dialogVisible = true;
      this.dialogDomain.dialogType = 1;
      this.model = model;
    },
    //对话框关闭事件
    closeDialog(){
      this.model={
        Number:'',//单号

        VendorId:'',//供应商Id
        VendorName:'',//供应商

        VendorContact:'',//联系人
        VendorContactTel:'',//联系人电话
        PaymentCategory:'',//付款方式
        PaymentAccount:'',//收款账户
        PaymentTime:'',//收款日期

        Status:'0',

        WarehouseId:'',//出库仓id
        WarehouseName:'',//出库仓

        ReturnDate:'',//退货日期
        DeliveryDate:'',//出库日期
        Remark:'',//备注
      }
    },
    //数据来源
    dataBind(){
      this.isLoading = true
      this.$http.get('/api/OrderPoReturn',{
        params:{
          PageIndex:this.pageDomain.pageDomain,
          PageSize:this.pageDomain.PageSize,

          Number:this.searchForm.Number,
          WarehouseId:this.searchForm.WarehouseId,
          VendorId:this.searchForm.VendorId,
          Status:this.searchForm.Status,
        }
      })
      .then(res => {
        this.tableData = res.Data
        this.pageDomain.TotalCount = res.Count
        this.isLoading = false
      })
    },

    exports(){
      this.$confirm('即将导出报表，是否继续？', '系统提示', {
                confirmButtonText: '导出',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.$http.request({
                    method: "GET",
                    loading:this.$loading(),
                    url: "/api/OrderPoReturn/Export",
                    responseType: 'blob'
                }).then((res)=>{
                    const blob = new Blob([res])
                    const downloadElement = document.createElement('a');
                    const href = window.URL.createObjectURL(blob); //创建下载的链接
                    downloadElement.href = href;
                    downloadElement.download = '设备类型信息.xls'; //下载后文件名
                    downloadElement.click(); //点击下载
                    window.URL.revokeObjectURL(href); //释放掉blob对象
                })
            }).catch((err)=>{
                console.log(err);
            })
    },
    GetOrderPoReturnSelectData(){
      //供应商
      this.$http.get('./api/Integrated/GetProductSelectData')
      .then(res => {
        console.log(res.Data);
        this.VendorList = res.Data.VendorList;
      })
      //仓库
      this.$http.get('./api/Integrated/GetOrderReturnSelectData')
      .then(res => {
        console.log(res.Data);
        this.WarehouseList = res.Data.WarehouseList;
      })
    },
    callback(){
      let actionName = this.isUpdate ? '编辑' : '新增';
      this.showNotify(actionName + '成功', 'success');
      this.dialogDomain.dialogVisible = false;
      this.dataBind();
     
    },
    //分页栏
    handleSizeChange(val) {
        this.pageDomain.PageIndex = 1
        this.pageDomain.PageSize = val
        this.dataBind()
    },
    handleCurrentChange(val) {
        this.pageDomain.PageIndex = val
        this.dataBind()
    },
  }
}
</script>

<style>

</style>